const ratio = (620 / 1920).toFixed(4);

const useBanner = () => {
  const list = ref([]);
  const calcHeight = ref("0");
  const autoplay = ref(true);
  const options = computed(() => ({
    height: calcHeight.value,
    trigger: "click",
    interval: 5000,
    arrow: "never",
    autoplay: autoplay.value,
    motionBlur: false,
  }));

  const getBanner = () => {
    setTimeout(() => {
      list.value = [
        {
          src: "/banner1.png",
        },
        {
          src: "/banner2.png",
        },
      ];
    }, 1000);
  };

  const handleResize = () => {
    calcHeight.value = `${window.innerWidth * ratio}px`;
  };
  onMounted(() => {
    getBanner();
    handleResize();
    window.addEventListener("resize", handleResize);
  });
  onUnmounted(() => {
    window.removeEventListener("resize", handleResize);
  });

  return {
    autoplay,
    list,
    options,
  };
};

export default useBanner;
